<template>
  <section>
    <div class="register">
      <router-link :to="{name:'account'}"><span class="glyphicon glyphicon-menu-left pull-left"></span></router-link>
      <span class="register-span">修改用户名</span>
    </div>
    <div class="centre">
      <!--双向数据绑定,输入框的值-->
      <input type="text" placeholder="输入用户名" v-model="valueParser" @input="judge" :class='{color:text}'>
      <p :style="{color:text ? colorRed: color}">{{text ?  '用户名长度在5到24位之间': '用户名只能修改一次(5-24字符之间)'}}</p>
      <button class="btn btn-primary" :disabled="text"  @click="toAccount">确认修改</button>
    </div>
  </section>
</template>

<script>
    export default {
        name: "alter",
      data(){
          return {
            valueParser:'',//输入框内 修改的用户名
            text:'',
            color: '#767676',
            colorRed:'red',
            personMsg:JSON.parse(localStorage.getItem('personObj')),//获取用户信息
          }
      },
      methods:{
        judge(){
          //判断输入框的值是否合乎长度,
          if (this.valueParser.length < 5){
            this.text = true
          }else {
            this.text = false
          }
        },
        toAccount(){
          //将输入框的值通过Vuex传给account
          this.$router.push({name:'account'})
          //修改用户名
          this.personMsg.username = this.valueParser
          this.$store.commit('personMassage',this.personMsg)
        }
      }
    }
</script>

<style scoped>
  .centre {
    width: 96%;
    margin:auto;
  }
  .centre input{
    width: 100%;
    margin-top: 0.1rem;
    background-color: #F2F2F2;
  }
  .color{
    border: 0.01rem solid red;
  }
  .centre p{
    width: 100%;
    margin-top: 0.1rem;
    font-size: 0.12rem;
  }
  .centre button{
    width: 100%;
    height: 0.4rem;
    margin-top: 0.1rem;
    background-color: #3199E8;
    transition: all 1s;
  }
</style>
